<template>
  <div class="index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>平台：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>店铺名称：</span>
          <el-input v-model ="storeName" label-width="50" class="w60"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>统计周期：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div id="timeDistribution" class="grid-content"></div>
      </el-col>
      <el-col :span="16">
        <div id="amount" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="table">
      <el-col :span="24">
        <div class="grid-content">
          <p class="title">会员购买活跃度分布</p>
          <el-table :data="tableData1" style="width: 100%" max-height="400">
            <el-table-column prop="recencyPeriodName" label="R值分组"></el-table-column>
            <el-table-column label="F=2">
              <el-table-column prop="data2" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=3">
              <el-table-column prop="data3" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=4">
              <el-table-column prop="data4" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=5">
              <el-table-column prop="data5" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F>5">
              <el-table-column prop="data6" label="会员数"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="table">
      <el-col :span="24">
        <div class="grid-content">
          <p class="title">会员购买价值分布</p>
          <el-table :data="tableData2" style="width: 100%" max-height="400">
            <el-table-column prop="monetaryPeriodName" label="M_分组"></el-table-column>
            <el-table-column label="F=2">
              <el-table-column prop="data2" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=3">
              <el-table-column prop="data3" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=4">
              <el-table-column prop="data4" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F=5">
              <el-table-column prop="data5" label="会员数"></el-table-column>
            </el-table-column>
            <el-table-column label="F>5">
              <el-table-column prop="data6" label="会员数"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "memberRMF",
  data() {
    return {
      value: "",
      stsDate: null,//统计日期
      //渠道下拉选项
      channelOptions: [
        {
          value:null,
          label:null,
        }
      ],

      //平台下拉选项
      platformOptions: [
        {
          value:null,
          label:null,
        }
      ],

      //RF表格
      tableData1: [
        {
          recencyPeriodName: null,
          data2: null,
          data3: null,
          data4: null,
          data5: null,
          data6: null,
        },
      ],
      //MF表格
      tableData2: [
        {
          monetaryPeriodName: null,
          data2: null,
          data3: null,
          data4: null,
          data5: null,
          data6: null,
        },
      ],

      //1：按日；2：按月；3：季度；4：年
      options: [
        {
          value: 1,
          label: "按日"
        },
        {
          value: 2,
          label: "按月"
        },
        {
          value: 3,
          label: "按季度"
        },
        {
          value: 4,
          label: "按年"
        },
      ],

      storeName:null,

      //活跃时间分布
      less30:0,
      total30To60:0,
      total60To90:0,
      total90To120:0,
      total120To150:0,
      total150To180:0,
      total210To240:0,
      total240To270:0,
      total270To300:0,
      total300To330:0,
      total330To360:0,
      total360To365:0,
      more365:0,

      //购买金额分布
      less100:0,
      total100To600:0,
      total600To1100:0,
      total1100To1600:0,
      total1600To2100:0,
      total2100To2600:0,
      total2600To3100:0,
      total3100To3600:0,
      total3600To4100:0,
      total4100To4600:0,
      total4600To5000:0,
      more5000:0,













    };
  },

  created(){
//    this.getStsDate();
  },


  mounted() {
    this.getDistributeOfActiveTime();
    this.getDistributeOfConsumeAmount();
    this.listAllChannel();//获取所有的渠道信息;
    this.listAllPlatform();//获取所有的平台信息;
    this.getRFOfMemberConsumeAmount();//获取MF表格数据;
    this.getMFOfMemberConsumeAmount();//获取MF表格数据;
  },
  methods: {

    /**
     * 获取统计日期
     */
    getStsDate(){
      let this_ = this;
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
        : nowDate.getMonth() + 1;
      let day = (nowDate.getDate() - 1) < 10 ? "0" + (nowDate.getDate()-1) : (nowDate.getDate() - 1);
      this_.stsDate = year + "-" + month + "-" + day;
    },

    /**
     * 活跃时间段 - 饼状图
     */
    getDistributeOfActiveTime(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getDistributeOfActiveTime(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.less30 = res.data.less30;
          this_.total30To60 = res.data.total30To60;
          this_.total90To120 = res.data.total90To120;
          this_.total120To150 = res.data.total120To150;
          this_.total150To180 = res.data.total150To180;
          this_.total180To210 = res.data.total180To210;
          this_.total210To240 = res.data.total210To240;
          this_.total240To270 = res.data.total240To270;
          this_.total270To300 = res.data.total270To300;
          this_.total300To330 = res.data.total300To330;
          this_.total330To360 = res.data.total330To360;
          this_.total360To365 = res.data.total360To365;
          this_.more365 = res.data.more365;
          this_.timeDistribution();
        }else{
          this_.$message({message:'无法获取会员【活跃时间段】总记录数' , type: 'error'})
        }
      });
    },
    /**
     * RF表格数据
     */
    getRFOfMemberConsumeAmount(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        deleteFlag:0,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getRFOfMemberConsumeAmount(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.tableData1= res.data;
        }else{
          this_.$message({message:'无法获取会员【MF表格数据】总记录数' , type: 'error'})
        }
      });
    },

    /**
     * MF表格数据
     */
    getMFOfMemberConsumeAmount(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        deleteFlag:0,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getMFOfMemberConsumeAmount(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.tableData2= res.data;
        }else{
          this_.$message({message:'无法获取会员【MF表格数据】总记录数' , type: 'error'})
        }
      });
    },

    /**
     * 会员 【购买价格】 分布 - 饼状图
     */
    getDistributeOfConsumeAmount(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getDistributeOfConsumeAmount(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.less100 = res.data.less100/10000;
          this_.total100To600 = res.data.total100To600/10000;
          this_.total600To1100 = res.data.total600To1100/10000;
          this_.total1100To1600 = res.data.total1100To1600/10000;
          this_.total1600To2100 = res.data.total1600To2100/10000;
          this_.total2100To2600 = res.data.total2100To2600/10000;
          this_.total2600To3100 = res.data.total2600To3100/10000;
          this_.total3100To3600 = res.data.total3100To3600/10000;
          this_.total3600To4100 = res.data.total3600To4100/10000;
          this_.total4100To4600 = res.data.total4100To4600/10000;
          this_.total4600To5000 = res.data.total4600To5000/10000;
          this_.more5000 = res.data.more5000/10000;
          this_.amount();
        }else{
          this_.$message({message:'无法获取会员【购买价格】总记录数' , type: 'error'})
        }
      });
    },

    //  活跃时间间隔分布
    timeDistribution() {
      let timeDistribution = document.getElementById("timeDistribution");
      let timeDistributionWrap = this.$echarts.init(timeDistribution);
      let option = {
        title: {
          text: "活跃时间间隔分布"
        },
        color: [
          "#1ea084",
          "#b0d1b5",
          "#29474d",
          "#f97e2c",
          "#a7cd67",
          "#ffc53d",
          "#ff6b6d",
          "#f785c0",
          "#51cfca",
          "#52b1ff",
          "#1ea084",
          "#b0d1b5",
          "#29474d",
          "#f97e2c"
        ],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          left: "center",
          top: "10%",
          data: [
            "0-30",
            "30-60",
            "60-90",
            "90-120",
            "120-150",
            "150-180",
            "180-210",
            "210-240",
            "240-270",
            "270-300",
            "300-330",
            "330-360",
            "360-365",
            ">=365"
          ]
        },
        series: [
          {
            top: "10%",
            name: "",
            type: "pie",
            radius: ["50%", "65%"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },

            data: [
              { value: this.less30, name: "0-30" },
              { value: this.total30To60, name: "30-60" },
              { value: this.total60To90, name: "60-90" },
              { value: this.total90To120, name: "90-120" },
              { value: this.total120To150, name: "120-150" },
              { value: this.total150To180, name: "150-180" },
              { value: this.total210To240, name: "210-240" },
              { value: this.total240To270, name: "240-270" },
              { value: this.total270To300, name: "270-300" },
              { value: this.total300To330, name: "300-330" },
              { value: this.total330To360, name: "330-360" },
              { value: this.total360To365, name: "360-365" },
              { value: this.more365, name: ">=365" }
            ]
          }
        ]
      };
      timeDistributionWrap.setOption(option);
    },
    // 累计购买金额分布
    amount() {
      let amount = document.getElementById("amount");
      let amountWrap = this.$echarts.init(amount);
      let option = {
        title: {
          text: "累计购买金额分布"
        },
        legend: {
          data: ["会员数"],
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "小于100",
            "100-600",
            "600-1100",
            "1100-1160",
            "1160-2100",
            "2100-2600",
            "2600-3100",
            "3100-3600",
            "3600-4100",
            "4100-4600",
            "4600-5000",
            ">=5000"
          ],
          axisLabel: {
            interval: 0,
            rotate: 60 //代表逆时针旋转45度
          }
        },
        yAxis: [
          {
            type: "value",
            name: " ",
            min: 0,
            max: 50,
            position: "left",
            axisLabel: {
              formatter: "{value} 万"
            }
          }
        ],
        series: [
          {
            name: "会员数",
            type: "bar",
            data: [
             this.less100,
             this.total100To600,
             this.total600To1100,
             this.total1100To1600,
             this.total1600To2100,
             this.total2100To2600,
             this.total2600To3100,
             this.total3100To3600,
             this.total3600To4100,
             this.total4100To4600,
             this.total4600To5000,
             this.more5000,
            ],
            barWidth: 30,
            color: "#1ea084"
          }
        ]
      };
      amountWrap.setOption(option);
    },


    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllChannel(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTimeStart:null,
      };
      this.utils.request.listAllChannel(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null && res.data.length>0 ){
          this.channelOptions = res.data;
        }else{
          this.$message({message:'没有获取到渠道信息' , type: 'error'})
        }
      });
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllPlatform(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTime:null,
      };
      this.utils.request.listAllPlatform(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null  && res.data.length>0 ){
          this.platformOptions = res.data;
        }else{
          this.$message({message:'没有获取到平台信息' , type: 'error'})
        }
      });
    },









  }
};
</script>

<style scoped  lang="scss">
 @import "../../../../assets/css/dataCenterEcharts.css";
</style>
